<template>
	<view class="comment-box">
		<view class="" v-show="show==true">
			<view v-if="datashow==true">
				<span style="color: red; margin-left: 25rpx;">{{ text }}</span>
			</view>
			<view class="cord">
				<h5 style="margin: 10rpx; font-size: 36rpx;">拍摄并上传身份证照片</h5>
				<view class="" style="color: #ccc;margin: 20rpx 10rpx; font-size: 26rpx; ">
					请保证身份证完整，身份证号清晰
				</view>
				<view class="">
					<view style="color: #9dafbc; margin: 23rpx 0; font-size: 28rpx;margin-left: 10rpx;">
						正面照
					</view>

					<view class="u-flex u-flex-around  u-flex-items-center">
						<view class="">
							<u-upload :fileList="fileList" @afterRead="afterRead" @delete="deletePic" name="6" multiple
								:maxCount="1" width="590rpx" height="300rpx">
								<view>
									<image src="../static/images/zheng.png" mode="widthFix"
										style="width: 590rpx;height: 300rpx;"></image>
								</view>
							</u-upload>
						</view>

					</view>
					<view style="color: #9dafbc; margin: 23rpx 0; font-size: 28rpx;margin-left: 10rpx;">
						反面照
					</view>
					<view class="u-flex u-flex-around  u-flex-items-center">
						<view class="">
							<u-upload :fileList="fileList2" @afterRead="card_noafterRead" @delete="card_nodeletePic"
								name="6" multiple :maxCount="1" width="590rpx" height="300rpx">
								<view>
									<image src="../static/images/fan.png" mode="widthFix"
										style="width: 590rpx;height: 300rpx;"></image>
								</view>
							</u-upload>
						</view>
					</view>
				</view>
			</view>
			<!--  -->
			<view class="cord">
				<h5 style="margin: 10rpx; font-size: 36rpx;">确认身份信息</h5>
				<u--form labelPosition="left" :model="model1" :rules="rules" ref="uForm">
					<u-form-item prop="userInfo.real_name" ref="item1">
						<view class="flexbox" style="">
							<span style="margin-right:  10rpx">姓名<span style="color: red;">*</span></span>
							<u--input inputAlign="right" v-model="model1.userInfo.real_name" disabledColor="#f5f6fa"
								placeholder="请输入姓名" border="none"></u--input>
						</view>
					</u-form-item>
					<u-form-item prop="userInfo.card_no" ref="item1">
						<view class="flexbox" style="">
							<span style="margin-right:  10rpx">身份证号<span style="color: red;">*</span></span>
							<u--input inputAlign="right" v-model="model1.userInfo.card_no" disabledColor="#f5f6fa"
								placeholder="请输入身份证号" border="none"></u--input>
						</view>
					</u-form-item>

				</u--form>

			</view>
			<view class="submitbox" @click="submits">
				<!-- 下一步：设置结算账户 -->
				提交审核
			</view>
		</view>
		<view v-show="show==false">
			<view class="cord">
				<h5 style="margin: 10rpx; font-size: 36rpx;">拍摄并上传银行卡正面</h5>
				<!-- <view class="" style="color: #ccc;margin: 20rpx 10rpx; font-size: 26rpx; ">
				请保持身份证完整，身份证号清晰
			</view> -->
				<view class="">
					<view style="color: #9dafbc; margin: 23rpx 0; font-size: 28rpx;margin-left: 10rpx;">
						正面照
					</view>
					<view class="u-flex u-flex-around  u-flex-items-center">
						<view class="">
							<u-upload :fileList="fileList3" @afterRead="bank_card_frontafterRead" @delete="bank_card_frontdeletePic" name="6" multiple
								:maxCount="1" width="590rpx" height="300rpx">
								<view>
									<image src="../static/images/yhz.png" mode="widthFix"
										style="width: 590rpx;height: 300rpx;"></image>
								</view>
							</u-upload>
						</view>
					</view>
				</view>
			</view>
			<!--  -->
			<view class="cord">
				<h5 style="margin: 10rpx; font-size: 36rpx;">房东结算账户信息</h5>
				<u--form labelPosition="left" :model="model1" :rules="rules2" ref="sForm">
					<u-form-item prop="userInfo2.bank_name" ref="item1">
						<view class="flexbox" style="">
							<span style="margin-right:  10rpx">银行名称<span style="color: red;">*</span></span>
							<u--input inputAlign="right" v-model="model1.userInfo2.bank_name" disabledColor="#f5f6fa"
								placeholder="银行名称" border="none"></u--input>
						</view>
					</u-form-item>
					<u-form-item prop="userInfo2.bank_card_no" ref="item1">
						<view class="flexbox" style="">
							<span style="margin-right:  10rpx">银行卡号<span style="color: red;">*</span></span>
							<u--input inputAlign="right" v-model="model1.userInfo2.bank_card_no" disabledColor="#f5f6fa"
								placeholder="请输入银行卡号" border="none"></u--input>
						</view>
					</u-form-item>
					<u-form-item prop="userInfo2.bank_city" ref="item1">
						<view class="flexbox" style="">
							<span style="margin-right:  10rpx">开户城市<span style="color: red;">*</span></span>
							<u--input inputAlign="right" v-model="model1.userInfo2.bank_city" disabledColor="#f5f6fa"
								placeholder="请输入城市" border="none"></u--input>
						</view>
					</u-form-item>
					<u-form-item prop="userInfo2.bank_branch" ref="item1">
						<view class="flexbox" style="">
							<span style="margin-right:  10rpx">开户支行<span style="color: red;">*</span></span>
							<u--input inputAlign="right" v-model="model1.userInfo2.bank_branch" disabledColor="#f5f6fa"
								placeholder="请输入开户支行" border="none"></u--input>
						</view>
					</u-form-item>

				</u--form>

			</view>
			<view class="submitbox" @click="submits">
				提交审核
			</view>
		</view>



	</view>
</template>

<script>
import { userhouse} from '@/api/landlord.js'
export default {
	data() {
		return {
			datashow:false,
			text:'',
			show: true,
			showSex: false,
			fileList: [],
			fileList2: [],
			fileList3: [],
			model1: {
				userInfo: {
					card_front: '',
					card_back: '',
					real_name: '',
					card_no: '',
				},
				userInfo2: {
					bank_card_front: '',
					bank_name: '',
					bank_card_no: '',
					bank_city: '',
					bank_branch: '',
				
				},
			},
			rules: {
				'userInfo.real_name': {
					type: 'string',
					required: true,
					message: '请输入姓名',
					trigger: ['blur', 'change']
				},
				'userInfo.card_no': {
					type: 'string',
				
					required: true,
					message: '请输入身份证号',
					trigger: ['blur', 'change']
				}

			},
			rules2: {
				'userInfo2.bank_name': {
					type: 'string',
				
					required: true,
					message: '请输入银行名称',
					trigger: ['blur', 'change']
				},
				'userInfo2.bank_card_no': {
					type: 'string',
				
					required: true,
					message: '请输入银行卡号',
					trigger: ['blur', 'change']
				},
				'userInfo2.bank_city': {
					type: 'string',
				
					required: true,
					message: '请输入开户城市',
					trigger: ['blur', 'change']
				},
				'userInfo2.bank_branch': {
					type: 'string',
		
					required: true,
					message: '请输入开户支行',
					trigger: ['blur', 'change']
				},
			},
			radio: '',
			switchVal: false
		};
	},
	onLoad(options){
		if (options.data) {
			let data = JSON.parse(options.data)
			if (data.status==2) {
				this.datashow = true
				this.text=data.reason
				this.fileList.push({
					url:data.card_front,
					urls: data.card_front

				})
				this.fileList2.push({
					url: data.card_back,
					urls: data.card_back

				})
				this.fileList3.push({
					url: data.bank_card_front,
					urls: data.bank_card_front
				})
				this.model1.userInfo = {
					card_front: data.card_front,
					card_back: data.card_back,
					real_name: data.real_name,
					card_no: data.card_no,
				}
				this.model1.userInfo2 = {
					bank_card_front: data.bank_card_front,
					bank_name: data.bank_name,
					bank_card_no: data.bank_card_no,
					bank_city: data.bank_city,
					bank_branch: data.bank_branch,
				}
			}else{
				this.datashow = false
			}
		}
		
	},
	methods: {
		submits() {
			this.$refs.sForm.validate().then(res => {
				// uni.$u.toast('校验通过')
				if (this.fileList3.length == 0) {
					uni.$u.toast('请上传银行卡正面')
					return
				} else {
					this.fileList3.forEach(e => {
						console.log(e);
						this.model1.userInfo2.bank_card_front = e.urls
					});
				}
				let data = {
					...this.model1.userInfo,
					...this.model1.userInfo2,
				}
				userhouse(data).then(res => {
					uni.$u.toast(res.data.msg)
					setTimeout(()=>{
						uni.navigateBack({
						delta: 1 // 返回的页面层级，1表示返回上一页
						});
					}, 1000);
				})


				console.log(data);
				

			}).catch(errors => {
				uni.$u.toast('校验失败')
			})
		},
		submit() {
			this.$refs.uForm.validate().then(res => {
				// uni.$u.toast('校验通过')
				if (this.fileList.length == 0) {
					uni.$u.toast('请上传身份证正面')
					return
				} else {
					this.fileList.forEach(e => {
						console.log(e);
						this.model1.userInfo.card_front = e.urls
					});
				}
				if (this.fileList2.length == 0) {
					uni.$u.toast('请上传身份证反面')
					return
				} else {
					this.fileList2.forEach(e => {
						console.log(e);
						this.model1.userInfo.card_back = e.urls
					});
				}
				this.show = false
				// console.log(this.model1.userInfo);
			}).catch(errors => {
				uni.$u.toast('校验失败')
			})
		},
		async bank_card_frontafterRead(event){
			const item = event.file[0];
			// 获取本地读取文件路径
			const url = item.url;
			//result为上传成功的响应数据
			let result = await this.uploadFilePromise(url);
			console.log(result);
			this['fileList3'].push({
				...item,
				//提示上传中
				status: 'success',
				message: '上传成功',
				urls: result.url
			});
		},
		bank_card_frontdeletePic(e) {
			this['fileList3'].splice(0, 1);
		},
		card_nodeletePic(e) {
			this['fileList2'].splice(0, 1);
		},
		// 反面
		async card_noafterRead(event) {
			const item = event.file[0];
			// 获取本地读取文件路径
			const url = item.url;
			//result为上传成功的响应数据
			let result = await this.uploadFilePromise(url);
			console.log(result);
			this['fileList2'].push({
				...item,
				//提示上传中
				status: 'success',
				message: '上传成功',
				urls: result.url
			});

		},
		// 身份正面删除
		deletePic(e) {
			this['fileList'].splice(0, 1);
		},
		// 回显上传本地图片
		async afterRead(event) {
			// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
			const item = event.file[0];
			// 获取本地读取文件路径
			const url = item.url;
			//result为上传成功的响应数据
			let result = await this.uploadFilePromise(url);
			console.log(result);
			this['fileList'].push({
				...item,
				//提示上传中
				status: 'success',
				message: '上传成功',
				urls: result.url
			});
		},
		// 上传图片
		uploadFilePromise(url) {
			// token
			const token = uni.getStorageSync('userInfo').token;
			return new Promise((resolve, reject) => {
				uni.uploadFile({
					// 完整上传路径 H5端需要解决跨域问题
					url: `${this.$Config.HTTP_REQUEST_URL}/api/common/upload`,
					// 本地上传读取到的url
					filePath: url,
					name: 'file',
					// 请求头
					header: {
						'Content-Type': 'application/x-www-form-urlencoded',
						'token': token
					},
					// 附加表单对象
					formData: {
						user: 'test'
					},
					success: res => {
						// 这里res是普通对象，但是res.data为JSON字符串，需要转一下
						const result = JSON.parse(res.data);
						resolve(result.data);
					}
				});
			});
		},

	},
	onReady() {
		//如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则。
		this.$refs.uForm.setRules(this.rules)
		this.$refs.sForm.setRules(this.rules2)
	},
};
</script>

<style lang="scss" scoped>
page {
	background: #f5f5f5;
}

.box-flex {
	display: flex;
	width: 100%;
	justify-content: space-between;
	align-items: center;
}

.comment-box {
	box-sizing: border-box;
	padding: 15rpx;
}

.cord {
	margin: 30rpx 0;
	box-sizing: border-box;
	padding: 15rpx;
	background: #fff;
	border-radius: 15rpx;
}

.flexbox {
	border-radius: 12rpx;
	font-size: 30rpx;
	display: flex;
	align-items: center;
	box-sizing: border-box;
	padding: 0 30rpx;
	background-color: #f5f6fa;
	width: 100%;
	height: 98rpx;
}

.submitbox {
	width: 100%;
	margin: 0 auto;
	border-radius: 50rpx;
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100rpx;
	color: #fff;
	background-color: #fe4f04;
}
</style>